<?  
$pass=0; 
if($_GET['admin'])
{

        //  echo "<pre>";
//          print_r($_GET['map']);
//          echo "</pre>;";
//          exit;
}       
if($data['map'][0])
{


               list($startlat,$startlng)=explode("|",$data['map'][0]);
               
               list($endlat,$endlng)=explode("|",$data['map'][count($data['map'])-1]); 
}else
{
$pass=1;
//exit;
}

if(count($data['map'])==1)
{

 $pass=1;
}
$arrayreplace=array("&nbsp;","\n");
?>
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Directions Waypoints</title>
    <link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    
    <script>
      var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
      var map;
      var iconBase = 'http://maps.google.com/mapfiles/kml/paddle/';
      
      function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var chicago = new google.maps.LatLng(13.752222, 100.493889);
        var mapOptions = {
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: chicago
        }
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        
        directionsDisplay.setMap(map);
        <?if($pass==0){?>
        calcRoute();
        <?}else if(count($data['map'])==1) {
        
      //  $arrayreplace=array("&nbsp;","\n");
        $data['title'][0]=str_replace($arrayreplace,"",strip_tags($data['title'][0]));
        ?>
        
        
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng("<?=$startlat?>", "<?=$startlng?>"),
          map: map,
          icon: iconBase + 'A_maps.png',
          title:'<?=$data['title'][0]?>',
          shadow: iconBase + 'A_maps.shadow.png'
        });
        
      var infowindow = new google.maps.InfoWindow({
      content: '<?=$data['title'][0]?>'
      }); 
      
      google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
      });   
            
       map.setCenter(new google.maps.LatLng("<?=$startlat?>", "<?=$startlng?>"));
       map.setZoom(15);
        <?}?>
      }

      function calcRoute() {


        var startlat="<?=$startlat?>";
        var startlng="<?=$startlng?>";
        
        var endlat="<?=$endlat?>";
        var endlng="<?=$endlng?>";
        
        console.log("<?=str_replace($arrayreplace,"",strip_tags($data['title'][0])).'   lat =>'.$startlat.'  and lng => '.$startlng ?>");
        
        var waypts = [];
        var checkboxArray = document.getElementById('waypoints');
        
        
        <?
        
        if(count($data['map'])>2)
        {
          for($i=0;$i<count($data['map']);$i++)
          {
              if($i>0&&$i<(count($data['map'])-1))
              {
                 
                list($lat,$lng)=explode("|",$data['map'][$i]);
                echo 'waypts.push({
                location:new google.maps.LatLng('.$lat.', '.$lng.'),
                stopover:true
                     });
                     console.log( "'.str_replace($arrayreplace,"",strip_tags($data['title'][$i])).'   lat =>'.$lat.'  and lng => '.$lng.'" );
                     
                     ';
              }
          
          }
        
        
        }
        
        
        
        ?>
  //       console.log("<?=str_replace($arrayreplace,"",strip_tags($_GET['title'][count($_GET['title'])-1])).'   lat =>'.$endlat.'  and lng => '.$endlng ?>");
       // for (var i = 0; i < checkboxArray.length; i++) {
         // if (checkboxArray.options[i].selected == true) {
          //  waypts.push({
//                location:"วังทองหลาง",
//                stopover:true
//                });
//                
//             waypts.push({
//                location:"ห้วยขวาง",
//                stopover:true
//                });
//             
//             
//             waypts.push({
//                location:"ดินแดง",
//                stopover:true
//                });
//                
//             waypts.push({
//                location:"เสาชิงช้า",
//                stopover:true
//                });
       
     //   }

        var request = {
            origin: new google.maps.LatLng(startlat, startlng),
            destination: new google.maps.LatLng(endlat, endlng),
            waypoints: waypts,
            optimizeWaypoints: true,
            avoidTolls:true,
            avoidHighways:true,
            provideRouteAlternatives:true,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
          // console.log(response);
          if (status == google.maps.DirectionsStatus.OK) {
              <?
              
              if(count($data['title'])){
              $knum=count($data['title']);
              for($i=0;$i<($knum-1);$i++)
              {?>
              response.routes[0].legs[<?=$i?>].start_address='<?='<div style="text-align:center"><img style="text-align:center"  width="120"  src="'.$data['simg'][$i].'"><br>'.str_replace($arrayreplace,"",strip_tags($data['title'][$i])).'</div>'?>';
              
              response.routes[0].legs[<?=$i?>].end_address='<?='<div style="text-align:center"><img style="text-align:center" width="120" src="'.$data['simg'][$i].'"><br>'.str_replace($arrayreplace,"",strip_tags($data['title'][$i+1])).'</div>'?>';
              
              <?
              }
              }?>
            directionsDisplay.setDirections(response);
            //var route = response.routes[0];
    
          }else
          {
          var arrayCharactor=new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
          <?if(count($data['map']))
          {
          $knum2=0;
          foreach($data['map'] as $valuemap)
          {
          list($lat,$lng)=explode("|",$valuemap);
          $arrayreplace=array("&nbsp;","\n");
          $data['title'][$knum2]=str_replace($arrayreplace,"",strip_tags($data['title'][$knum2]));
          ?>
         var marker<?=$knum2?> = new google.maps.Marker({
          position: new google.maps.LatLng("<?=$lat?>", "<?=$lng?>"),
          map: map,
          icon: iconBase + arrayCharactor[<?=$knum2?>]+'_maps.png',
          title:'<?=$data['title'][$knum2]?>'
         
        });
        
      var infowindow<?=$knum2?> = new google.maps.InfoWindow({
      content: '<?='<div style="text-align:center"><img style="text-align:center"  width="120"  src="'.$data['simg'][$knum2].'"><br>'.$data['title'][$knum2].'</div>'?>'
      }); 
      
      google.maps.event.addListener(marker<?=$knum2?>, 'click', function() {
      infowindow<?=$knum2?>.open(map,marker<?=$knum2?>);
      });   
        
        <?
          $knum2++;
          }
        ?>
        map.setCenter(new google.maps.LatLng("<?=$lat?>", "<?=$lng?>"));
       map.setZoom(15);
        <?
        }?>
          
          
          }
        });
      }
      
      
      
      
      
      
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="float:left;width:100%;height:100%;"></div>

  </body>
</html>
